<template>
  <a-modal
    v-model:open="visible"
    title="创建聊天室"
    :width="400"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirm-loading="loading"
  >
    <div class="create-room-form">
      <div class="form-item">
        <label class="form-label">聊天室名称</label>
        <a-input
          v-model:value="roomName"
          placeholder="请输入聊天室名称"
          :maxlength="50"
          show-count
          @keydown.enter="handleOk"
          ref="inputRef"
        />
      </div>
      <div class="form-item">
        <label class="form-label">描述（可选）</label>
        <a-textarea
          v-model:value="roomDescription"
          placeholder="请输入聊天室描述"
          :rows="3"
          :maxlength="200"
          show-count
        />
      </div>
      <div class="form-item">
        <label class="form-label">自动对话</label>
        <a-switch
          v-model:checked="autoTalkEnabled"
          checked-children="开启"
          un-checked-children="关闭"
        />
        <div class="form-help">开启后，AI角色将自动参与对话</div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { message } from 'ant-design-vue'

interface Props {
  open: boolean
}

interface Emits {
  (e: 'update:open', value: boolean): void
  (e: 'create', data: { name: string; description: string; autoTalkEnabled: boolean }): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式状态
const visible = ref(false)
const loading = ref(false)
const roomName = ref('')
const roomDescription = ref('')
const autoTalkEnabled = ref(true) // 默认开启自动对话
const inputRef = ref()

// 监听 props.open 变化
watch(() => props.open, (newVal) => {
  visible.value = newVal
  if (newVal) {
    // 弹窗打开时重置表单并聚焦输入框
    roomName.value = ''
    roomDescription.value = ''
    autoTalkEnabled.value = true // 重置为默认值
    nextTick(() => {
      inputRef.value?.focus()
    })
  }
})

// 监听 visible 变化
watch(visible, (newVal) => {
  emit('update:open', newVal)
})

// 处理确认
const handleOk = async () => {
  if (!roomName.value.trim()) {
    message.error('请输入聊天室名称')
    return
  }

  if (roomName.value.trim().length < 2) {
    message.error('聊天室名称至少需要2个字符')
    return
  }

  loading.value = true
  
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    emit('create', {
      name: roomName.value.trim(),
      description: roomDescription.value.trim(),
      autoTalkEnabled: autoTalkEnabled.value
    })
    
    visible.value = false
    message.success('聊天室创建成功')
  } catch (error) {
    message.error('创建聊天室失败，请重试')
    console.error('创建聊天室失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理取消
const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped>
.create-room-form {
  padding: 8px 0;
}

.form-item {
  margin-bottom: 16px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #262626;
  font-size: 14px;
}

:deep(.ant-input) {
  border-radius: 6px;
}

:deep(.ant-input:focus) {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

:deep(.ant-input-data-count) {
  color: #8c8c8c;
  font-size: 12px;
}

.form-help {
  margin-top: 4px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}
</style>